<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico"></link>
<link href="../css/reset.css" rel="stylesheet" type="text/css"></link>
<link href="../css/common.css" rel="stylesheet" type="text/css"></link>
<link href="css/style.css" rel="stylesheet" type="text/css"></link>
<link href="css/user-main.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="../js/jquery/jquery.js"></script>
<style type="text/css">
.uploadPic-box{
	margin:50px auto;
	width:900px;
	height:500px;
	overflow:hidden;
	background-color:#fff;
	box-shadow:2px 2px 4px #666;
	border:solid 1px #ccc;
}
.uploadT{
	padding:10px;
	border-bottom:solid 1px #ccc;
}
.uploadB{
	height:100%;
}
.uploadL{
	width:180px;
	_height:500px;
	min-height:500px;
	padding:14px 0 0 10px;
	border-right:solid 1px #ccc;
}
.uploadR{
	margin-left:200px;
}
.uploadBody{
	width:650px;
	_height:300px;
	min-height:300px;
	margin:0 auto;
	overflow:hidden;
	border:dashed 4px #CCC;
	z-index:100;
}
.uploadHint{
	position:absolute;
	z-index:0;
	left:150px;	
}
.UBpic-list{
	/*width:680px;	*/
}
.hintText{
	margin-top:80px;
	text-align:center;
	font-size:50px;
	color:#ccc;
}
.hintText span{
	font-size:20px;
}
.hintBtn{
	text-align:center;
}
.btntext{
	background-color:#06F;
	display:inline-block;
	padding:2px 10px;
	margin-top:10px;
	cursor:pointer;
	color:#fff;
	border:solid 1px #00C;
}
.picPreview{
	float:left;
	width:100px;
	height:100px;
	text-align:center;
	border:solid 1px #ccc;
	margin:10px 0px 10px 23px;
	overflow:hidden;
}
.picPreview img{
	height:100%;
}
	
	
		
</style>
<script type="text/javascript">
	$(function(){
		var oDropBox = document.getElementById('uploadBody'),
		//var oDropBox = $("#"),
		//oImgInfo = document.getElementById('imgInfo');
		oImgInfo = $(".UBpic-list");
		
		oDropBox.addEventListener('dragover', function(e) {//侦听事件并处理函数
			e.stopPropagation();							//该方法将停止事件的传播，阻止它被分派到其他 Document 节点
			e.preventDefault();								//取消事件的默认动作
		}, false);
		oDropBox.addEventListener('drop', handleDrop, false);
		function handleDrop(e) {
			e.stopPropagation();
			e.preventDefault();
			var fileList = e.dataTransfer.files,　　//获取拖拽文件
			fileType = fileList[0].type,
			　　　　// oImg = document.createElement('img'),
			reader = new FileReader();
			if (fileType.indexOf('image') == -1) {  //检测文件是否图片
				alert('请拖拽图片~');
				return;
			};
			var $brow = $.browser;
			var $divimg = $(".picPreview:not(:has(img))");
			//alert($divimg.length);
			var img = document.getElementById('imgg');
			//$divimg.eq(3).hidden();
			//alert($brow.mozilla);
			if($brow.mozilla == true){
			　　//FF4+
				$.each(fileList,function(index){
					var numm = window.URL.createObjectURL(this);
					$divimg.eq(index).append('<img src='+numm+' alt="" />');
			　　		//img.src = window.URL.createObjectURL(fileList[0]);
					});
					
				//img.src = window.URL.createObjectURL(fileList[0]);
			　}else if($brow.webkit == true){
			　　//Chrome8+
				$.each(fileList,function(index){
					var numm = window.webkitURL.createObjectURL(this);
					$divimg.eq(index).append('<img src='+numm+' alt="" />');
			　		//img.src = window.webkitURL.createObjectURL(fileList[0]);
					});
			　}else{
			　　//实例化file reader对象
			　　var reader = new FileReader();
			　　reader.onload = function(e) {
			　　		img.src = this.result;
			　　　	oDragWrap.appendChild(img);
			　　};
　			　reader.readAsDataURL(fileList[0]);
　			};
		};
		
		
	})
	
</script>
</head>
<body>
<div class="uploadPic-boxbg">
	<div class="uploadPic-box">
    	<h2 class="uploadT">上传并分享图片<i class="up-close"></i></h2>
        <div class="uploadB clearfix">
            <form method="post" action="">
        		<div class="uploadL lfloat">
                
                </div>
                <div class="uploadR">
            		<div class="picboxName pal">
                    	<span class="newName">相册名称：</span><input type="text"  />
                    </div>
                    <div id="uploadBody" class="uploadBody pr">
                    	<input type="file" class="fileBtn hidden" multiple="multiple" />
                        <div class="uploadHint">
                        	<div class="hintText">将照片拖放到此处<br /><span>或者</span></div>
                            <div class="hintBtn">
                            	<div class="btntext">选择计算机上的照片</div>
                            </div>
                        </div>
                        <div class="UBpic-list clearfix">
                                <div class="picPreview">
                                
                                </div>
                                <div class="picPreview">
                                
                                </div>
                                <div class="picPreview">
                                
                                </div>
                                <div class="picPreview">
                                
                                </div>
                                <div class="picPreview">
                                
                                </div>
                                <div class="picPreview">
                                
                                </div>
                        </div>
                    </div>
            	</div>
            </form>
        </div>
	</div>
</div>




</body>
</html>
